<template>
	<view>
		<view>	
			<view style="margin-top:50rpx;">
				<view class="classAttendanceWrap">
					<view :class="[item.status=='已报修'?'classAttendence0':(item.status=='处理中'?'classAttendence2':(item.status=='未报修'?'classAttendence3':'classAttendence2'))]"
					v-for="(item,index) in classArr" :key="index" @click="mainSkip(item)">
						<view class="classAttendenceFont">
							<view v-if="item.status=='良好'" style="color:#0000FF;font-size: 30rpx;">{{item.className}}</view>
							<view v-else style="font-size: 30rpx;padding-top:15rpx">{{item.className}}</view>
							<view  style="font-size: 18rpx;margin-top:5rpx">{{item.status}}</view>
						</view>
						
					</view>
				</view>
				
			</view>		
			<view class="logoSty"   style="margin-bottom: 150rpx;"></view>
		</view>
		<my-bottom :bottomArr="attBottoms" :bottomName="bottomName"></my-bottom>
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default{
		name:'managementIndex',
		data(){
			return{
				topName:'班级报修',
				userName:'畔湖宛',
				bottomName:'maintenance',
				classArr:[{
					class:"Y34",
					status:'已报修'
				},{
					class:"Y35",
					status:'未报修'
				},{
					class:"Y36",
					status:'处理中'
				},{
					class:"Y37",
					status:'已报修'
				},{
					class:"Y38",
					status:'已报修'
				},{
					class:"Y39",
					status:'已报修'
				},],
				attBottoms:[{
				    name:'home',
				    icon:'iconfont icon-yonghutongji',
				    text:"考勤",
				    path: '/pages/classManagement/classManagementAttendance'
				},
				{
				    name:'clear',
				    icon:'iconfont icon-saoba',
				    text:"卫生",
				    path: '/pages/classManagement/classManageHealth'
				},
				{
				   name:'maintenance',
				   icon:'iconfont icon-baoxiu',
				   text:"报修",
				   path: '/pages/classManagement/classManageMaintence'
				}],
				classDeptId:1,
			}
		},
		components:{
			topCom,
			bottomCom,
		},
		onLoad(options) {
			this.classDeptId = options.classDeptId
		},
		mounted(){
			this.attBottoms[0].path = `/pages/classManagement/classManagementAttendance?classDeptId=${this.classDeptId}`
			this.attBottoms[1].path = `/pages/classManagement/classManageHealth?classDeptId=${this.classDeptId}`
			this.attBottoms[2].path =`/pages/classManagement/classManageMaintence?classDeptId=${this.classDeptId}`
			this.getAllClassRepairList()
		},
		methods:{
			getAllClassRepairList(){
				this.$api.maintenance.getAllClassRepairList().then(res=>{
					this.classArr = res.data
					this.classArr .forEach((item,index)=>{
						if(item.status==0 ){
							item.status = "已报修"
						}else if(item.status == 1){
							item.status ="处理中"
						}else{
							item.status="未报修"
						}
					})
				})
			},
			mainSkip(item){				
				uni.navigateTo({
					url:`/pages/maintenance/maintenanceStatus?classId=${item.classId}&className=${item.className}&classDeptId=${this.classDeptId}`
				})
			}
		}
	}
</script>

<style>
	.dormitoryTitle{
		color:#0000FF;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}
	.classAttendenceFont{
		color: white;
		text-align: center;
		margin-top:40rpx;
		
	}
	.classAttendanceWrap{
		width:720rpx;
		
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.classAttendence0{
		width:23%;
		height:180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/A.png);
		background-size: 100%;
		background-repeat: no-repeat;
		
	}
	.classAttendence1{
		width:23%;
		height:180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/b.png);
		background-size: 100%;
		background-repeat: no-repeat;
		
	}
	.classAttendence3{
		width:23%;
		height:180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/E-1.png);
		background-size: 100%;
		background-repeat: no-repeat;
		
	}
	.classAttendence2{
		width:23%;
		height:180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-012.png);
		background-size: 100%;
		background-repeat: no-repeat;
		
	}
	.manageSearch{
		width:650rpx;
		height:50rpx;
		border: solid 2px #C0C0C0;
		border-radius: 20rpx;
		margin:auto;
		text-align: right;
		padding-right:10rpx;
		font-size: 24rpx;
	}
	.indexContent{
		height: unset !important;
		
	}
</style>

